<template>
  <van-overlay :show="show" @click="onClose">
    <div class="wrapper flex_center flex_c">
      <div class="block" @click.stop>
        <div class="title">你可以使用我们做什么？</div>
        <p class="mb-12">1. 你可以把和女友的经历写成歌曲，用她喜欢的风格，写成歌曲直接一键微信发给她。</p>
        <p class="mb-12">2. 你可以给自己的抖音视频等配乐。你的文案都可以直接唱出来。</p>
        <p class="mb-12">3. 你可以“吐槽”自己的前任、朋友、工作等。</p>
        <p class="mb-12">4. 你可以把专属经历写成歌曲，在上班的路上播放。</p>
        <div class="title">我如何使用:</div>
        <p class="mb-12">非常简单，把你想表达的话，文案等当作歌词输入。 说出想要的风格，示例：</p>
        <p class="mb-12">（1）“创作一首关于夏日海滩的流行歌曲，要有吉他和轻松的鼓点。”</p>
        <p class="mb-12">（2）“来一首激励人心的摇滚乐，主唱声音要有力，有电吉他和鼓声。”</p>
        <p>（3）“我想要一首安静的钢琴曲，适合读书时候听。”</p>
      </div>
      <img @click="onClose" src="../assets/img/music/close_icon.png" alt="" class="close">
    </div>
  </van-overlay>
</template>
<script setup>
import { ref } from 'vue'
let props = defineProps({
  show: {
    type: Boolean,
    default: false
  }
})
let emits = defineEmits(['update:show'])
let onClose = () => {
  emits('update:show', false)
}
</script>
<style lang="scss" scoped>
.wrapper {
  height: 100%;
}

.block {
  width: 343px;
  background: #161616;
  border-radius: 8px;
  font-size: 14px;
  color: rgba(255,255,255,0.5);
  padding: 24px 16px;
  line-height: 20px;
  .title {
    font-weight: 600;
    font-size: 16px;
    color: #FFFFFF;
    line-height: 19px;
    margin-bottom: 12px;
  }
}
.close {
  width: 36px;
  height: 36px;
  display: block;
  margin-top: 24px;
}
</style>